<template>
  <div class="bookRecommend">
    <h3>热门推荐</h3>
    <ul>
      <li v-for="book in books" :key="book.id">
        <router-link :to="'/book/' + book.id">
          {{ book.title }}
          <span>{{ currency(factPrice(book.price, book.discount)) }}</span>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HomeBooksHot",
  data() {
    return {
      books: [],
    };
  },
  inject: ["factPrice", "currency"],
  created() {
    this.axios
      .get("/book/hot")
      .then((response) => {
        if (response.status == 200) {
          this.books = response.data;
        }
      })
      .catch((error) => console.log(error));
  },
};
</script>

<style scoped>
.bookRecommend {
  border: 1px solid #e0eee3;
  width: 200px;
  text-align: center;
  border-radius: 10px;
  background: rgba(228, 227, 227, 0.144);
  transition: 0.8s;
}
.bookRecommend:hover {
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.356);
}
.bookRecommend ul {
  padding: 0%;
}
.bookRecommend ul li {
  list-style-type: none;
  margin-bottom: 10px;
}
</style>
